{% extends "recommendation/shared.html" %}

{% block title %}
Choose movie set
{% endblock %}

{% block extra_head %}
	<script type="text/javascript" src="{{ STATIC_URL }}autosuggest.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}dynamicList.js"></script>
	<link href="{{ STATIC_URL }}autosuggest.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}
	<h2>
		Which movies would you like the recommender to consider?
	</h2>
	<div class="paragraph">
		<small>Note: to search from all the movies, leave the list empty.</small>
		<br />
		<br />
		<form id="movies" action="" method="post">
			{% csrf_token %}
			<div id="autosuggest"><ul></ul></div>
			<p>
				Please enter the name of a movie: 
				<input type="text" id="inputText" name="movie" />
				<script type="text/javascript">
					var movies = new Array({% for m in movies %}"{{ m|safe }}"{% if not forloop.last %},{% endif %}{% endfor %});
					new AutoSuggest(document.getElementById("inputText"), movies, function(){addToList(movies); return false;});
				</script>
				<input style="margin-left:350px;" class="buttons" type="image" src="{{ STATIC_URL }}images/buttons/add.png" id="inputTextAddBtn" value="Add" onclick="addToList(movies); return false;" /> 
			</p>
			<div id="addErr"> </div>
			<ul id="chosen">
			</ul>
			
			<br />
			<br />
			{% for f in friendList %}
				<input type="hidden" name="friendList" value="{{ f }}" id="{{ f }}" />
			{% endfor %}
			{% for g in groupList %}
				<input type="hidden" name="groupList" value="{{ g }}" id="{{ g }}" />
			{% endfor %}
			{% if recommendSeen %}
				<input type="hidden" name="recommendSeen" id="recommendSeen" value="true" />
			{% endif %}
			<div class="helpSheet">
				Start typing the movie's name, and press add to add it to the list.
				We will only recommend movies from this list.
			</div>
			<input type="image" src ="{{ STATIC_URL }}images/buttons/find.png" />
		</form>
	</div>
{% endblock %}
